<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewPort" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- imPassword css js jq -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'css/bootstrap.min.css') }}">
    <script src="{{ url_for('static',filename='jQuery/jquery.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/poper.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
    <!-- echarts js -->
    <script src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
    <link href="{{ url_for('static',filename='img/icon/compute.ico') }}" rel="shortcut icon">
    <title>Virtual_Analyzer</title>
</head>
<body class="bg-white" style="width: 100%;height: 100%;">
    <div class="fixed-top bg-white">
        <nav class="navbar navbar-expand-lg navbar-light shadow p-1 mb-1 bg-white rounded">
            <div width="30" height="30" class="d-inline-block bg-white align-top"></div>
            <img src="../static/img/icon/电脑.png" width="30" height="30" class="d-inline-block align-top" alt="">
            <div style="width: 10px;" class="bg-white"></div>
            <a class="navbar-brand bg-white" href="../">虚拟能谱分析仪</a>
            <button class="navbar-toggler bg-white" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon bg-white"></span>
            </button>
            <div class="collapse navbar-collapse bg-white" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="../">主页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
                          窗口
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <a class="dropdown-item" onclick="integral_show()">显示区域</a>
                          <a class="dropdown-item" onclick="marks_show()">显示标线</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item"><input type="CheckBox" onchange="always_show(this)">窗口始终显示</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">工具</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../help">帮助</a>
                    </li>
                </ul>
            </div>
            <button class="btn btn-light btn-outline-secondary" type="button" value="0" id="themeChange" onclick="changeColor()">
                深色模式
            </button>
        </nav>
    </div>
    <div style="height: 70px;" class="bg-white"></div>
    <div class="d-flex justify-content-start bg-white">
        <div class="shadow d-flex flex-row p-3 mb-5 bg-white rounded bg-white" style="width: 1100px;height:850px;">
            <div class="border-right alert alert-light d-flex flex-column bd-highlight mb-3">
                <div style="height: 30px;"></div>
                <div class="accordion" id="accordionExample" style="width: 110px;height:50px;">
                    <button class="font-weight-bold text-left border-bottom" style="width: 110px;height:30px;border: none;background-color:#00000003" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true">
                            工作方式
                    </button>
                    <div id="collapseOne" class="collapse show">
                        <p class="text-muted" style="font-size: 15px;">测量方式:PHA
                            <br>结束条件:时间
                            <button class="text-muted font-weight-bold text-left border-bottom" style="width: 110px;height:30px;border: none;background-color:#00000003"  data-toggle="collapse" data-target="#collapseOne">
                                谱长
                            </button>
                        </p>
                    </div>
                    <button class="font-weight-bold text-left border-bottom" style="width: 110px;height:30px;border: none;background-color:#00000003" data-toggle="collapse" data-target="#collapseOne1">
                        条件信息
                    </button>
                    <div id="collapseOne1" class="collapse show">
                        <p class="text-muted" style="font-size: 15px;">预制时间:
                            <span id="data_time_show">300</span>s
                            <br>已测时间:<span id="data_time_now_show">0</span>s
                            <br>预制计数:<span id="data_count_show">10000</span>
                            <br>数据采集:<span id="data_start_show">关闭</span>
                        </p>
                    </div>
                    <button class="font-weight-bold text-left border-bottom" style="width: 110px;height:30px;border: none;background-color:#00000003" data-toggle="collapse" data-target="#collapseOne3">
                        计数信息
                    </button>
                    <div id="collapseOne3" class="collapse show">
                        <p class="text-muted" style="font-size: 15px;">当前量程:256
                            <br>控制方式:<span>自动</span>
                            <br>放大区峰高:<span>0</span>
                            <br>放大区峰位:<span>0</span>
                        </p>
                    </div>
                    <button class="font-weight-bold text-left border-bottom" style="width: 110px;height:30px;border: none;background-color:#00000003" data-toggle="collapse" data-target="#collapseOne4">
                        放大区位置
                    </button>
                    <div id="collapseOne4" class="collapse show">
                        <p class="text-muted" style="font-size: 15px;">起始值:<span>0</span>
                            <br>停止值:<span>127</span>
                            <br>宽度:<span>128</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="d-flex flex-column bd-highlight mb-3">
                <div id="main" style="width: 900px;height:800px;" class="bg-white" onmouseup="mouseup(event)", onmousedown="mousedown(event)"></div>
                <div class="progress" style="width: 867px;">
                    <div style="width: 76px;" class="bg-white"></div>
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuemin="0" aria-valuemax="100" id="data_progress">time:s</div>
                </div>
            </div>
        </div>
        <div style="width: 15px;"></div>
        <div class="d-flex flex-column-reverse bg-white" style="width: 350px;height:900px" id="controll">
            <div>
                <form id="mark" style="width: 350px;height:550px" class="shadow p-3 mb-5 bg-white rounded">
                    <!-- 标线操作 -->
                    <p class="font-weight-bold">标线操作 <button type="button" class="close" id="mark_close" onclick="clear_marks()" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button></p>
                    <!-- 标线1 -->

                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text text-light" style="background-color: #DA4453AD;">标线1</span>
                        </div>
                        <input type="number" oninput="mark_change(1)" onfocus="reflash_mark(0)" onblur="reflash_mark(1)" class="form-control" id="mark1">
                        <input type="text" disabled="disabled" class="form-control" id="marky1">
                        <div style="width: 5px;" class="bg-white"></div>                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="markreply1" onmouseout="mark_reply_color_change(0)" onmouseover="mark_reply_color_change(1)" onclick="mark_reply(1)" src="/static/img/icon/撤销.svg"></button>
                    </div>
                    <!-- 标线2 -->
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text text-light" style="background-color: #E9573FAD;">标线2</span>
                        </div>
                        <input type="number" oninput="mark_change(2)" onfocus="reflash_mark(0)" onblur="reflash_mark(1)" class="form-control" id="mark2">
                        <input type="text" disabled="disabled" class="form-control" id="marky2">
                        <div style="width: 5px;" class="bg-white"></div>                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="markreply2" onmouseout="mark_reply_color_change(2)" onmouseover="mark_reply_color_change(3)" onclick="mark_reply(2)" src="/static/img/icon/撤销.svg"></button>
                    </div>
                    <!-- 标线3 -->
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text text-light" style="background-color: #F6BB42AD;">标线3</span>
                        </div>
                        <input type="number" oninput="mark_change(3)" onfocus="reflash_mark(0)" onblur="reflash_mark(1)" class="form-control" id="mark3">
                        <input type="text" disabled="disabled" class="form-control" id="marky3">
                        <div style="width: 5px;" class="bg-white"></div>                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="markreply3" onmouseout="mark_reply_color_change(4)" onmouseover="mark_reply_color_change(5)" onclick="mark_reply(3)" src="/static/img/icon/撤销.svg"></button>
                    </div>
                    <!-- 标线4 -->
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text text-light" style="background-color: #8CC152AD;">标线4</span>
                        </div>
                        <input type="number" oninput="mark_change(4)" onfocus="reflash_mark(0)" onblur="reflash_mark(1)" class="form-control" id="mark4">
                        <input type="text" disabled="disabled" class="form-control" id="marky4">
                        <div style="width: 5px;" class="bg-white"></div>                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="markreply4" onmouseout="mark_reply_color_change(6)" onmouseover="mark_reply_color_change(7)" onclick="mark_reply(4)" src="/static/img/icon/撤销.svg"></button>
                    </div>
                    <!-- 标线5 -->
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text text-light" style="background-color: #37BC9BAD;">标线5</span>
                        </div>
                        <input type="number" oninput="mark_change(5)" onfocus="reflash_mark(0)" onblur="reflash_mark(1)" class="form-control" id="mark5">
                        <input type="text" disabled="disabled" class="form-control" id="marky5">
                        <div style="width: 5px;" class="bg-white"></div>                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="markreply5" onmouseout="mark_reply_color_change(8)" onmouseover="mark_reply_color_change(9)" onclick="mark_reply(5)" src="/static/img/icon/撤销.svg"></button>
                    </div>
                    <!-- 标线6 -->
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text text-light" style="background-color: #967ADCAD;">标线6</span>
                        </div>
                        <input type="number" oninput="mark_change(6)" onfocus="reflash_mark(0)" onblur="reflash_mark(1)" class="form-control" id="mark6">
                        <input type="text" disabled="disabled" class="form-control" id="marky6">
                        <div style="width: 5px;" class="bg-white"></div>                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="markreply6" onmouseout="mark_reply_color_change(10)" onmouseover="mark_reply_color_change(11)" onclick="mark_reply(6)" src="/static/img/icon/撤销.svg"></button>
                    </div>
                    <!-- 标线7 -->
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text text-light" style="background-color: #D770ADAD;">标线7</span>
                        </div>
                        <input type="number" oninput="mark_change(7)" onfocus="reflash_mark(0)" onblur="reflash_mark(1)" class="form-control" id="mark7">
                        <input type="text" disabled="disabled" class="form-control" id="marky7">
                        <div style="width: 5px;" class="bg-white"></div>                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="markreply7" onmouseout="mark_reply_color_change(12)" onmouseover="mark_reply_color_change(13)" onclick="mark_reply(7)" src="/static/img/icon/撤销.svg"></button>
                    </div>
                    <!-- 标线8 -->
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text text-light" style="background-color: #AAB2BDAD;">标线8</span>
                        </div>
                        <input type="number" oninput="mark_change(8)" onfocus="reflash_mark(0)" onblur="reflash_mark(1)" class="form-control" id="mark8">
                        <input type="text" disabled="disabled" class="form-control" id="marky8">
                        <div style="width: 5px;" class="bg-white"></div>                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="markreply8" onmouseout="mark_reply_color_change(14)" onmouseover="mark_reply_color_change(15)" onclick="mark_reply(8)" src="/static/img/icon/撤销.svg"></button>
                    </div>
                    <!-- 标线9 -->
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text text-light" style="background-color: #434A54AD;">标线9</span>
                        </div>
                        <input type="number" oninput="mark_change(9)" onfocus="reflash_mark(0)" onblur="reflash_mark(1)" class="form-control" id="mark9">
                        <input type="text" disabled="disabled" class="form-control" id="marky9">
                        <div style="width: 5px;" class="bg-white"></div>                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="markreply9" onmouseout="mark_reply_color_change(16)" onmouseover="mark_reply_color_change(17)" onclick="mark_reply(9)" src="/static/img/icon/撤销.svg"></button>
                    </div>
                </form>
            </div>
            <div>
                <form id="integral" style="width: 350px;height:300px" class="shadow p-3 mb-1 bg-white rounded">
                    <!-- 区间设置 -->
                    <p class="font-weight-bold">选中区间操作<button type="button" class="close" id="integral_close" onclick="clear_integral()" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button></p>
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text">区间</span>
                        </div>
                        <input type="number" oninput="integral_change()" class="form-control" id="integral_min">
                        <input type="number" oninput="integral_change()" class="form-control" id="integral_max">
                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" id="integral_choose" class="bg-white" src="/static/img/icon/区间.svg" onclick="i_choose()" style="width: 30px;height: 25px;">
                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="integralreply" onmouseout="integral_reply_color_change(0)" onmouseover="integral_reply_color_change(1)" onclick="integral_reply()" src="/static/img/icon/撤销.svg"></button>
                    </div>
                    <!-- 区间颜色 -->
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text">区间颜色</span>
                        </div>
                        <div style="width: 20px;height: 38px;background-color:#DA4453" onclick="integral_color_change(0)"></div>
                        <div style="width: 20px;height: 38px;background-color:#E9573F" onclick="integral_color_change(1)"></div>
                        <div style="width: 20px;height: 38px;background-color:#F6BB42" onclick="integral_color_change(2)"></div>
                        <div style="width: 20px;height: 38px;background-color:#8CC152" onclick="integral_color_change(3)"></div>
                        <div style="width: 20px;height: 38px;background-color:#37BC9B" onclick="integral_color_change(4)"></div>
                        <div style="width: 20px;height: 38px;background-color:#967ADC" onclick="integral_color_change(5)"></div>
                        <div style="width: 20px;height: 38px;background-color:#D770AD" onclick="integral_color_change(6)"></div>
                        <div style="width: 20px;height: 38px;background-color:#AAB2BD" onclick="integral_color_change(7)"></div>
                        <div style="width: 20px;height: 38px;background-color:#434A54" onclick="integral_color_change(8)"></div>
                        <div style="width: 20px;height: 38px;background-color:#4A89DC" onclick="integral_color_change(9)"></div>
                    </div>
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text">计数</span>
                        </div>
                        <input type="text" readonly="readonly" class="form-control" id="counts">
                    </div>
                    <div class="input-group mb-3 bg-white">
                        <div class="input-group-prepend bg-white">
                          <span class="input-group-text">峰值查找</span>
                        </div>
                        <input type="text" readonly="readonly" class="form-control" id="peak">
                        <div style="width: 5px;" class="bg-white"></div>
                        <img type="button" id="peak_show" class="bg-white" src="/static/img/icon/可见(1).svg" onclick="p_show()" style="width: 30px;height: 25px;">
                    </div>
                </form>
            </div>
        </div>
        <div style="width: 10px;" class="bg-white"></div>
        <div>
            <form id="menu" style="width: 420px;height:850px" class="shadow p-3 mb-1 bg-white rounded">
                <!-- 选择自己的文件 -->
                <p class="font-weight-bold">用户自定义操作</p>
                <div class="input-group mb-3 bg-white">
                    <div class="input-group-prepend bg-white">
                      <span class="input-group-text">自定义文件</span>
                    </div>
                    <div class="custom-file">
                        <input type="file" accept=".txt" class="custom-file-input" onchange="file_change()" id="file_input" aria-describedby="inputGroupFileAddon01">
                        <label class="custom-file-label" id="file_input_inner">Choose file</label>
                    </div>
                    <button class="btn btn-outline-success" type="button" onclick="file_submit()" id="sub">上传</button>
                    <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="file_reply" onmouseout="file_reply_color_change(0)" onmouseover="file_reply_color_change(1)" onclick="file_reply()" src="/static/img/icon/撤销.svg"></button>
                </div>
                <!-- x轴设置 -->
                <div class="input-group mb-3 bg-white">
                    <div class="input-group-prepend bg-white">
                      <span class="input-group-text">横轴</span>
                    </div>
                    <input type="number" onkeydown="enter_x_change()" class="form-control" disabled="true" id="x_min">
                    <input type="number" onkeydown="enter_x_change()" class="form-control" disabled="true" id="x_max">
                    <button type="button" class="btn btn-success" onclick="x_change()">设置</button>
                    <div style="width: 5px;" class="bg-white"></div>
                    <img type="button" id="xlock" class="bg-white" src="/static/img/icon/sounding(2).svg" onclick="x_lock()" style="width: 30px;height: 25px;">
                    <div style="width: 5px;" class="bg-white"></div>
                    <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="xreply" onmouseout="x_reply_color_change(0)" onmouseover="x_reply_color_change(1)" onclick="x_reply()" src="/static/img/icon/撤销.svg"></button>
                </div>
                <!-- y轴设置 -->
                <div class="input-group mb-3 bg-white">
                    <div class="input-group-prepend bg-white">
                      <span class="input-group-text">量程</span>
                    </div>
                    <input type="number" onkeydown="enter_y_change()" class="form-control" disabled="true" id="y_min">
                    <input type="number" onkeydown="enter_y_change()" class="form-control" disabled="true" id="y_max">
                    <button type="button" class="btn btn-success" onclick="y_change()">设置</button>
                    <div style="width: 5px;" class="bg-white"></div>
                    <img type="button" id="ylock" class="bg-white" src="/static/img/icon/sounding(2).svg" onclick="y_lock()" style="width: 30px;height: 25px;">
                    <div style="width: 5px;" class="bg-white"></div>
                    <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="yreply" onmouseout="y_reply_color_change(0)" onmouseover="y_reply_color_change(1)" onclick="y_reply()" src="/static/img/icon/撤销.svg"></button>
                </div>
                <!-- 刻度设置 -->
                <div class="input-group mb-3 bg-white">
                    <div class="input-group-prepend bg-white">
                      <span class="input-group-text">刻度</span>
                    </div>
                    <input type="number" onkeydown="grid_t_change()" class="form-control" id="grid_x">
                    <input type="number" onkeydown="grid_t_change()" class="form-control" id="grid_y">
                    <button type="button" class="btn btn-success" onclick="grid_change()">设置</button>
                    <div style="width: 5px;" class="bg-white"></div>
                    <img type="button" id="grid_dotted" class="bg-white" src="/static/img/icon/实线.svg" onclick="grid_dotted()" style="width: 30px;height: 25px;">
                    <div style="width: 5px;" class="bg-white"></div>
                    <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="grid_reply" onmouseout="grid_reply_color_change(0)" onmouseover="grid_reply_color_change(1)" onclick="grid_reply()" src="/static/img/icon/撤销.svg"></button>
                </div>
                <!-- 刻度线宽度 -->
                <div class="input-group mb-3 bg-white">
                    <div class="input-group-prepend bg-white">
                      <span class="input-group-text">线宽</span>
                    </div>
                    <input type="range" min="1" max="6" style="width: 100px;" oninput="width_change()" value="1" class="form-control" id="width_range">
                    <input type="number" min="1" max="6" value="1" style="width: 10px;" onchange="width_input_change()" onkeydown="grid_width_change()" class="form-control" id="width_input">
                    <button type="button" class="btn btn-success" onclick="width_change()">设置</button>
                    <div style="width: 40px;" class="bg-white"></div>
                    <img type="button" style="width: 25px;height: 25px;" class="bg-white" id="width_reply" onmouseout="width_reply_color_change(0)" onmouseover="width_reply_color_change(1)" onclick="width_reply()" src="/static/img/icon/撤销.svg"></button>
                </div>
                <!-- 线颜色 -->
                <div class="input-group mb-3 bg-white">
                    <div class="input-group-prepend bg-white">
                      <span class="input-group-text">线颜色</span>
                    </div>
                    <div style="width: 31px;height: 38px;background-color:#DA4453" onclick="line_color_change(0)"></div>
                    <div style="width: 31px;height: 38px;background-color:#E9573F" onclick="line_color_change(1)"></div>
                    <div style="width: 31px;height: 38px;background-color:#F6BB42" onclick="line_color_change(2)"></div>
                    <div style="width: 31px;height: 38px;background-color:#8CC152" onclick="line_color_change(3)"></div>
                    <div style="width: 31px;height: 38px;background-color:#37BC9B" onclick="line_color_change(4)"></div>
                    <div style="width: 31px;height: 38px;background-color:#967ADC" onclick="line_color_change(5)"></div>
                    <div style="width: 31px;height: 38px;background-color:#D770AD" onclick="line_color_change(6)"></div>
                    <div style="width: 31px;height: 38px;background-color:#AAB2BD" onclick="line_color_change(7)"></div>
                    <div style="width: 31px;height: 38px;background-color:#434A54" onclick="line_color_change(8)"></div>
                    <div style="width: 31px;height: 38px;background-color:#4A89DC" onclick="line_color_change(9)"></div>
                </div>
                <div class="shadow p-3 mb-1">
                    <p class="font-weight-bold">分析模块</p>
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                          <a class="nav-link active" href="#">峰区查找</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">能谱匹配</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">AI报告</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
    <div class='fixed-bottom'>
        <div class="d-flex flex-row shadow">
            <p class="text-monospace bg-white" id="mouse_pos" style="width: 300px;"></p>
        </div>
    </div>
    <!-- 提示框 -->
    <div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
        <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
            <div class="toast-header">
                <strong class="mr-auto text-danger" id="msg_title"></strong>
                <small id="msg_next_title"></small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body" id="msg"></div>
        </div>
    </div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">设置测量方式</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="col-form-label">时间:</label>
              <input type="number" class="form-control" value="0" onkeydown="enter_set()" id="time_max">
            </div>
            <div class="form-group">
              <label for="message-text" class="col-form-label">计数:</label>
              <input type="number" class="form-control" value="0" id="count_max">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="data_start()">开始测量</button>
        </div>
      </div>
    </div>
</div>
</body>


<script>
    var data_flag = 0;
    var data = [];
    var data_temp = [];
    window.onload = function(event){
        get_my_data();
    };
    function get_my_data(){
        task = $.ajax({
            url: "/load_data",
            data: [],
            type: "POST",
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (data) {
                json_data = JSON.parse(data);
                data_temp = json_data["value"];
                console.log(json_data)
                }
            });
        task.done(function(){
            data = data_temp;
            data_flag = 1;
            myChart.setOption(option);
            msg_show("获取远程文件成功");
            myChart.setOption({
                xAxis:{
                    max:data.length+data[0][0]+20,
                    min:data[0][0],
                },
                series:{
                    data:data
                }
            });
        });
    }
    document.oncontextmenu = function(){return false;}
    var smooth = 0;
    var lock = 0;
    var yaxis_lock = 0;
    var mark = 0;
    var myChart = echarts.init(document.getElementById('main'));
    let base = 0
    var startX = 0;
    var endX = 0;
    var mousePos={
        x:0,
        y:0
    };
    var integral = 0;
    var bar = 0;
    var line = 1;
    var integral_color = "#000000AD";
    var i_min = 0;
    var i_max = 0;
    var start_flag = 0;
    option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
            return [pt[0], '10%'];
            },
            formatter:function(params){
                Xindex = params[0].dataIndex;
                let str = "";
                params.forEach((item) => {
                    str += item.seriesName+ "<br />"+
                        '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#6a7985AD'+'"></span>' + "("+data[Xindex][0] + " , " + data[Xindex][1] +")" + "<br />";
                });
                return str;         
            },
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985AD'
                }
            },
            showContent:true,
            transitionDuration:0,
        },
        title: {
            text: '虚拟能谱数据'
        },
        grid: {
            show: true,
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true,
        },
        toolbox: {
            itemGap:10,
            itemSize:30,
            feature: {
                dataZoom: {
                    show:false,
                    yAxisIndex: 'none'
                },
                myTool_start: {
                    show: true,
                    title: '开始读取',
                    icon: 'image://../static/img/icon/播放.svg',
                    onclick: function (){
                        if(start_flag==0){
                            if(data_time_progress!=0){
                                data_start();
                                return;
                            }
                            $('#exampleModal').modal('show')
                        }
                        else{
                            start_flag=0;
                            data_pause();
                            myChart.setOption({
                                toolbox:{
                                    feature:{
                                        myTool_start:{
                                            icon:'image://../static/img/icon/播放.svg'
                                        }
                                    }
                                }
                            });
                        }
                    }
                },
                myTool_stop: {
                    show: true,
                    title: '终止读取',
                    icon: 'image://../static/img/icon/停止.svg',
                    onclick: function (){
                        data_stop();
                        start_flag=0;
                        myChart.setOption({
                            toolbox:{
                                feature:{
                                    myTool_start:{
                                        icon:'image://../static/img/icon/播放.svg'
                                    }
                                }
                            }
                        });
                    }
                }
                ,
                myTool_lock: {
                    show: true,
                    title: '选中区域',
                    icon: 'image://../static/img/icon/剪切.svg',
                    onclick: function (){
                        if(lock==0){
                            lock=1;
                            startX=myChart.getModel().getComponent('xAxis').axis.scale._extent[0];
                            endX=myChart.getModel().getComponent('xAxis').axis.scale._extent[1];
                            myChart.setOption({
                                xAxis:{
                                    max:endX,
                                    min:startX
                                },
                                dataZoom:[
                                    {
                                    start: 0,
                                    end: 100
                                    },
                                    {
                                    start: 0,
                                    end: 100
                                    }
                                ],
                                toolbox:{
                                    feature:{
                                        myTool_lock:{
                                            icon:'image://../static/img/icon/剪切(1).svg'
                                        }
                                    }
                                }
                            });
                            msg_show("已放大选中区域");
                        }
                        else{
                            lock=0;
                            myChart.setOption({
                                xAxis:{
                                    max:null,
                                    min:null
                                },
                                dataZoom:[
                                    {
                                    start: parseFloat(startX*100/data.length),
                                    end: parseFloat(endX*100/data.length)
                                    },
                                    {
                                    start: parseFloat(startX*100/data.length),
                                    end: parseFloat(endX*100/data.length)
                                    }
                                ],
                                toolbox:{
                                    feature:{
                                        myTool_lock:{
                                            icon:'image://../static/img/icon/剪切.svg'
                                        }
                                    }
                                }
                            });
                            msg_show("取消选中");
                        }
                    }
                },
                myTool_mark: {
                    show: true,
                    title: '点击获取标线',
                    icon: 'image://../static/img/icon/标线.svg',
                    onclick: function (){
                        if(integral_flag==1){
                            integral_flag=0;
                            myChart.setOption({
                                toolbox:{
                                    feature:{
                                        myTool_integral:{
                                            icon:'image://../static/img/icon/积分.svg'
                                        }
                                    }
                                }
                            })
                        }
                        if(mark==0){
                            mark=1;
                            myChart.setOption({
                                toolbox:{
                                    feature:{
                                        myTool_mark:{
                                            icon:'image://../static/img/icon/标线(1).svg'
                                        }
                                    }
                                }
                            })
                            msg_show("开始标记");
                            marks_show();
                        }
                        else{
                            mark=0;
                            myChart.setOption({
                                toolbox:{
                                    feature:{
                                        myTool_mark:{
                                            icon:'image://../static/img/icon/标线.svg'
                                        }
                                    }
                                }
                            });
                            msg_show("停止标记");
                        }
                    }
                },
                myTool_integral: {
                    show: true,
                    title: '获取区域',
                    icon: 'image://../static/img/icon/积分.svg',
                    onclick: function (){
                        if(mark==1){
                            mark=0;
                            myChart.setOption({
                                toolbox:{
                                    feature:{
                                        myTool_mark:{
                                            icon:'image://../static/img/icon/标线.svg'
                                        }
                                    }
                                }
                            })
                        }
                        if(integral_flag==0){
                            integral_flag=1;
                            myChart.setOption({
                                toolbox:{
                                    feature:{
                                        myTool_integral:{
                                            icon:'image://../static/img/icon/积分(1).svg'
                                        }
                                    }
                                }
                            })
                            msg_show("拖拉获取区域");
                            integral_show();
                        }
                        else{
                            integral_flag=0;
                            myChart.setOption({
                                toolbox:{
                                    feature:{
                                        myTool_integral:{
                                            icon:'image://../static/img/icon/积分.svg'
                                        }
                                    }
                                }
                            });
                            msg_show("取消获取区域");
                        }
                    }
                },
                myTool_smooth: {
                    show: true,
                    title: 'b样条曲线',
                    icon: 'image://../static/img/icon/b样条曲线.svg',
                    onclick: function (){
                        if(smooth==0){
                            smooth=1;
                            myChart.setOption({
                                series:[
                                    {
                                        smooth:true
                                    }
                                ],
                                toolbox:{
                                    feature:{
                                        myTool_smooth:{
                                            icon:'image://../static/img/icon/b样条曲线(1).svg'
                                        }
                                    }
                                }
                            });
                            msg_show("曲线平滑");
                        }
                        else{
                            smooth=0;
                            myChart.setOption({
                                series:[
                                    {
                                        smooth:false
                                    }
                                ],
                                toolbox:{
                                    feature:{
                                        myTool_smooth:{
                                            icon:'image://../static/img/icon/b样条曲线.svg'
                                        }
                                    }
                                }
                            })
                            msg_show("取消曲线平滑");
                        }
                    }
                },
                dataView: {
                    readOnly: false
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'value',
            boundaryGap: false,
            splitLine: {
                show: true,
                lineStyle:{
                    undefined,
                    width: 1,
                    type: 'solid'
                }
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '5%'],
            splitLine: {
                show: true,
                lineStyle:{
                    undefined,
                    width: 1,
                    type: 'solid'
                }
            }
        },
        dataZoom: [
            {
                bottom:"0px",
                height: 100,
                type: 'slider',
                xAxisIndex: 0,
                show:true,
                start: 0,
                end: 100,
                borderColor:"#000000AD",
            },
            {
                height: 100,
                zoomOnMouseWheel:'shift',
                moveOnMouseMove:'shift',
                type: 'inside',
                xAxisIndex: 0,
                show:true,
            }
        ],
        visualMap: {
            type: 'piecewise',
            show: false,
            dimension: 0,
            seriesIndex: 0,
            pieces: [
                {
                    gt: 1,
                    lt: 2,
                    color: '#FFFFFF00'
                }
            ]
        },
        series: [
            {
                lineStyle: {
                    color: '#5470C6',
                    width: 1
                },
                clip:true,
                name: '虚拟数据1',
                type: 'line',
                smooth: false,
                symbol: 'none',
                data: [],
                clickable : true,
                areaStyle: {},
                sampling:"lttb"
            }
        ]
    };
    //模式背景颜色切换
    
    var color_list = ["#DA4453","#E9573F","#F6BB42","#8CC152","#37BC9B","#967ADC","#D770AD","#AAB2BD","#434A54","#4A89DC"];
    var markLine_num = 0;
    var markLine = [];
    var integral_line = [];
    var peakLine = [];
    var markLine_integral = [];
    var markLine_integral_peakLine = [];
    var markLine_x = [];
    var integral_timer;
    var X_temp;
    var integral_flag = 0;
    var mouse_flag = 0;
    function mousedown(){
        if(event.button==0){
            if(mousePos.x<=995&&mousePos.x>=205){
                if(mousePos.y<=785&&mousePos.y>=145){
                    X_temp = Xindex;
                    if(mark==1){
                        markLine_num += 1;
                        if(markLine_num>9){
                            markLine_num=9;
                            msg_show("标线最多为10条");
                            return;
                        }
                        document.getElementById("mark"+markLine_num).value = Xindex;
                        document.getElementById("marky"+markLine_num).value = data[Number(Xindex)][1];
                        y = myChart.getModel().getComponent('yAxis').axis.scale._extent;
                        markLine_x.push(Xindex);
                        markLine.push({xAxis: Xindex,symbol:"triangle",
                                        lineStyle: 
                                        {
                                            color:color_list[markLine_num-1],
                                            type: 'solid'
                                        },
                        label: {color:color_list[markLine_num-1],formatter:'标线'+markLine_num+':'+markLine_x[markLine_num-1],fontSize:10}})
                        markLine_integral = markLine.concat(integral_line);
                        markLine_integral_peakLine = markLine_integral.concat(peakLine);
                        myChart.setOption({
                            series:[
                                {
                                    markLine: {
                                    data:markLine_integral_peakLine,
                                    animation:false
                                    }
                                }
                            ]
                        });
                    }
                    else if(integral_flag==1){
                        mouse_flag = 1;
                        i_min = Xindex;
                        integral_line = [];
                        peakLine = [];
                        integral_line.push({xAxis: Xindex,symbol:"none",lineStyle: 
                                        {
                                            color:"black",
                                        },
                                    });
                        markLine_integral = markLine.concat(integral_line);
                        markLine_integral_peakLine = markLine_integral.concat(peakLine);
                        myChart.setOption({
                            series:[
                                {
                                    markLine: {
                                    data:markLine_integral_peakLine,
                                    animation:false
                                    }
                                }
                            ]
                        });
                        i = 0;
                        integral_timer = setInterval(function(){
                            //your codes
                            max_temp=0;
                            min_temp=0;
                            if(Xindex==X_temp){
                                Xindex++;
                                min_temp=X_temp;
                                max_temp=Xindex;
                            }
                            else if(Xindex<X_temp){
                                min_temp=Xindex;
                                max_temp=X_temp;
                            }
                            else{
                                min_temp=X_temp;
                                max_temp=Xindex;
                            }
                            myChart.setOption({
                                visualMap: {
                                    pieces: [
                                    {
                                        gt: min_temp,
                                        lt: max_temp,
                                        color: integral_color
                                    }
                                    ]
                                },
                            })
                        },50)
                    }
                }
            }
        }
    };
    var integral_state=1;
    var marks_state=1;
    var Xindex=0;
    global_timer = setInterval(function(){
        if(data_flag==1){
            if(yaxis_lock==0){
                startY_temp=myChart.getModel().getComponent('yAxis').axis.scale._extent[0];
                endY_temp=myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
                document.getElementById("y_min").value=startY_temp;
                document.getElementById("y_max").value=endY_temp;
            }
            if(xaxis_lock==0){
                startX_temp=myChart.getModel().getComponent('xAxis').axis.scale._extent[0];
                endX_temp=myChart.getModel().getComponent('xAxis').axis.scale._extent[1];
                document.getElementById("x_min").value=startX_temp;
                document.getElementById("x_max").value=endX_temp;
            }
            if(mousePos.x<=995&&mousePos.x>=205){
                if(mousePos.y<=785&&mousePos.y>=145){
                    document.getElementById("mouse_pos").innerHTML = '('+mousePos.x+','+mousePos.y+')'+"   X:"+Xindex+"  Y:"+data[Xindex][1];
                }
                else{
                    document.getElementById("mouse_pos").innerHTML = '('+mousePos.x+','+mousePos.y+')';
                }
            }
            else{
                document.getElementById("mouse_pos").innerHTML = '('+mousePos.x+','+mousePos.y+')';
            }
            if(stop_reflash_mark==0){
                for(var i=0;i<9;i++){
                    if(i<markLine_x.length){
                        document.getElementById("mark"+(i+1)).value = markLine_x[i];
                        document.getElementById("marky"+(i+1)).value = data[Number(markLine_x[i])][1];
                    }
                    else{
                        document.getElementById("mark"+(i+1)).value = null;
                        document.getElementById("marky"+(i+1)).value = null;
                    }
                }
            }
            if(integral_state==0&&marks_state==0){
                document.getElementById("menu").setAttribute("style","width:750px;height:850px");
            }
            else{
                document.getElementById("menu").setAttribute("style","width:420px;height:850px");
            }
        }
    },30);
    function mouseup(event){
        if(event.button==0){
            if(mousePos.x<=995&&mousePos.x>=205){
                if(mousePos.y<=785&&mousePos.y>=145){
                    if(integral_flag==1){
                        mouse_flag=0;
                        clearInterval(integral_timer);
                        try{
                            if(Xindex==integral_line[0].xAxis){
                                integral_line.push({xAxis: Xindex+1,symbol:"none",lineStyle: 
                                    {
                                        color:"black",
                                    },
                                });
                            }
                            else{
                                integral_line.push({xAxis: Xindex,symbol:"none",lineStyle: 
                                    {
                                        color:"black",
                                    },
                                });
                            }
                        }
                        catch(error){
                            return;
                        }
                        if(Number(integral_line[0].xAxis)>Number(integral_line[1].xAxis)){
                            min_temp = Number(integral_line[1].xAxis);
                            max_temp = Number(integral_line[0].xAxis);
                        }
                        else if(Number(integral_line[0].xAxis)==Number(integral_line[1].xAxis)){
                            min_temp = Number(integral_line[0].xAxis);
                            max_temp = Number(integral_line[1].xAxis+1);
                        }
                        else{
                            min_temp = Number(integral_line[0].xAxis);
                            max_temp = Number(integral_line[1].xAxis);
                        }
                        document.getElementById("integral_min").value = min_temp;
                        document.getElementById("integral_max").value = max_temp;
                        markLine_integral = markLine.concat(integral_line);
                        markLine_integral_peakLine = markLine_integral.concat(peakLine);
                        myChart.setOption({
                            series:[
                                {
                                    markLine: {
                                    data:markLine_integral_peakLine,
                                    animation:false
                                    }
                                }
                            ]
                        });
                        myChart.setOption({
                            visualMap: {
                                pieces: [
                                {
                                    gt: min_temp,
                                    lt: max_temp,
                                    color: integral_color
                                }
                                ]
                            },
                        })
                        counts();
                    }
                }
            }
            if(integral_flag==1){
                try {
                    if(integral_line[1].xAxis==null){
                        integral_reply();
                        clearInterval(integral_timer);
                        return;
                    }
                } catch (error) {
                    integral_reply();
                    clearInterval(integral_timer);
                    return;
                }
                
            }
        }
    }
    window.onmouseout = function () {
        if(mouse_flag==1){
            integral_reply();
            clearInterval(integral_timer);
            mouse_flag=0;
        }
    };
    var stop_reflash_mark = 0;
    function mouseMove(ev)
    {
        ev= ev || window.event;
        mousePos = mouseCoords(ev);
        //alert(ev.pageX);
    }

    function mouseCoords(ev)
    {
        if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
        }
        return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop - document.body.clientTop
        };   

    }
    document.onmousemove = mouseMove; 
    // 换主题颜色
    function changeColor(){
        colorChange = document.getElementById('themeChange');
        color_now = colorChange.value;
        if(color_now=="1"){
            colorChange.setAttribute("class", "btn btn-light btn-outline-secondary");
            colorChange.innerHTML="深色模式";
            colorChange.value="0";
            myChart.dispose();  
            myChart = echarts.init(document.getElementById('main'), 'light');
            myChart.setOption(option);
            myChart.setOption({
                series:{
                    data:data
                }
            });
            myChart.setOption({
                series:[{
                    smooth: false,
                }]
            });
            obj = document.getElementsByClassName("bg-secondary");
            i_temp = obj.length;
            for(var i=0;i<i_temp+1;i++){
                var class_temp = String(obj[0].className);
                class_temp = class_temp.replace(/bg-secondary/,"bg-white");
                obj[0].setAttribute("class",class_temp);
            }
        }
        else if(color_now=="0"){
            colorChange.setAttribute("class", "btn btn-secondary btn-outline-light");
            colorChange.innerHTML="浅色模式";
            colorChange.value="1";
            myChart.dispose();  
            myChart = echarts.init(document.getElementById('main'), 'dark');
            myChart.setOption(option);
            myChart.setOption({
                series:{
                    data:data
                }
            });
            obj = document.getElementsByClassName("bg-white");
            i_temp = obj.length;
            for(var i=0;i<i_temp+1;i++){
                var class_temp = String(obj[0].className);
                class_temp = class_temp.replace(/bg-white/,"bg-secondary");
                obj[0].setAttribute("class",class_temp);
            }
        }
    }
    function clear_mark(i){
        if(i==11){
            markLine = [];
            markLine_num = 0;
            markLine_x = [];
            myChart.setOption({
                series:[
                    {
                        markLine: {
                        data:markLine,
                        lineStyle: {
                            normal: {
                                type: 'solid',
                            }
                        },
                        animation:false
                        }
                    }
                ]
            });
        }
    }
    //y轴操作
    function y_reply(){
        myChart.setOption({
            yAxis:{
                max:null,
                min:null
            }
        });
    }

    function y_lock(){
        y_min = document.getElementById("y_min");
        y_max = document.getElementById("y_max");
        ylock = document.getElementById("ylock");
        if(yaxis_lock==1){
            yaxis_lock=0;
            y_min.setAttribute("disabled","true");
            y_max.setAttribute("disabled","true");
            ylock.setAttribute("src","/static/img/icon/sounding(2).svg");
        }
        else{
            yaxis_lock=1;
            y_min.removeAttribute("disabled");
            y_max.removeAttribute("disabled");
            ylock.setAttribute("src","/static/img/icon/sounding.svg");
        }
    }
    function enter_y_change(){  
        var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异  
        if (event.keyCode == 13){  
            y_change();  
        }  
    }  
    function y_change(){
        if(yaxis_lock==1){
            y_min = Number(document.getElementById("y_min").value);
            y_max = Number(document.getElementById("y_max").value);
            if(y_max<=y_min){
                msg_show("量程错误，请重新输入!");
                return;
            }
            myChart.setOption({
                yAxis:{
                    max:y_max,
                    min:y_min
                }
            });
            msg_show("修改量程成功！")
        }
    }
    function y_reply_color_change(state){
        yreply = document.getElementById("yreply");
        if(state==0){
            yreply.setAttribute("src","/static/img/icon/撤销.svg");
        }
        else{
            yreply.setAttribute("src","/static/img/icon/撤销(1).svg");
        }
    }
    //x轴操作
    var xaxis_lock = 0;
    function x_reply(){
        myChart.setOption({
            dataZoom:[
                {
                start: 0,
                end: 100
                },
                {
                start: 0,
                end: 100
                }
            ],
        });
    }

    function x_lock(){
        x_min = document.getElementById("x_min");
        x_max = document.getElementById("x_max");
        xlock = document.getElementById("xlock");
        if(xaxis_lock==1){
            xaxis_lock=0;
            x_min.setAttribute("disabled","true");
            x_max.setAttribute("disabled","true");
            xlock.setAttribute("src","/static/img/icon/sounding(2).svg");
        }
        else{
            xaxis_lock=1;
            x_min.removeAttribute("disabled");
            x_max.removeAttribute("disabled");
            xlock.setAttribute("src","/static/img/icon/sounding.svg");
        }
    }
    function enter_x_change(){  
        var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异  
        if (event.keyCode == 13){  
            x_change();  
        }  
    }  
    function x_change(){
        if(xaxis_lock==1){
            x_min = Number(document.getElementById("x_min").value);
            x_max = Number(document.getElementById("x_max").value);
            if(x_max<=x_min){
                msg_show("区间错误，请重新输入!");
                return;
            }
            myChart.setOption({
                dataZoom:[
                    {
                    start: parseFloat((x_min*100)/data.length),
                    end: parseFloat((x_max*100)/data.length)
                    },
                    {
                    start: parseFloat((x_min*100)/data.length),
                    end: parseFloat((x_max*100)/data.length)
                    }
                ],
            });
            msg_show("修改区间成功！")
        }
    }
    function x_reply_color_change(state){
        xreply = document.getElementById("xreply");
        if(state==0){
            xreply.setAttribute("src","/static/img/icon/撤销.svg");
        }
        else{
            xreply.setAttribute("src","/static/img/icon/撤销(1).svg");
        }
    }
    //刻度操作
    var gr_dotted = 0;
    function grid_t_change(){  
        var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异  
        if (event.keyCode == 13){  
            grid_change();  
        }  
    }  
    function grid_change(){
        grid_x = Number(document.getElementById("grid_x").value);
        grid_y = Number(document.getElementById("grid_y").value);
        myChart.setOption({
            xAxis:{
                interval:grid_x
            },
            yAxis:{
                interval:grid_y
            }
        })
    }
    function grid_reply(){
        document.getElementById("grid_x").value=null;
        document.getElementById("grid_y").value=null;
        myChart.setOption({
            xAxis:{
                interval:null
            },
            yAxis:{
                interval:null
            }
        });
    }
    function grid_reply_color_change(state){
        g_reply = document.getElementById("grid_reply");
        if(state==0){
            g_reply.setAttribute("src","/static/img/icon/撤销.svg");
        }
        else{
            g_reply.setAttribute("src","/static/img/icon/撤销(1).svg");
        }
    }
    function grid_dotted(){
        g_dotted = document.getElementById("grid_dotted");
        if(gr_dotted==0){
            gr_dotted=1;
            g_dotted.setAttribute("src","/static/img/icon/虚线(1).svg");
            myChart.setOption({
                xAxis:{
                    splitLine: {
                    show: true,
                    lineStyle:{
                        type:'dashed'
                        },
                    }
                },
                yAxis:{
                    splitLine: {
                    show: true,
                    lineStyle:{
                        type:'dashed'
                        }
                    }
                }
            });
        }
        else if(gr_dotted==2){
            gr_dotted=0;
            g_dotted.setAttribute("src","/static/img/icon/实线.svg");
            myChart.setOption({
                xAxis:{
                    splitLine: {
                    show: true,
                    lineStyle:{
                        type:'solid'
                        }
                    }
                },
                yAxis:{
                    splitLine: {
                    show: true,
                    lineStyle:{
                        type:'solid'
                        }
                    }
                }
            });
        }
        else{
            gr_dotted=2;
            g_dotted.setAttribute("src","/static/img/icon/不显示密码.svg");
            myChart.setOption({
                xAxis:{
                    splitLine: {
                    show: false,
                    lineStyle:{
                        type:'solid'
                        }
                    }
                },
                yAxis:{
                    splitLine: {
                    show: false,
                    lineStyle:{
                        type:'solid'
                        }
                    }
                }
            });
        }
    }
    //线宽设置
    function width_input_change(){
        document.getElementById("width_range").value = document.getElementById("width_input").value;
        width_change();
    }
    function grid_width_change(){  
        var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异  
        if (event.keyCode == 13){  
            width_change();  
        }  
    }  
    function width_change(){
        document.getElementById("width_input").value = document.getElementById("width_range").value;
        width_temp = document.getElementById("width_range").value;
        myChart.setOption({
            series:[{
                lineStyle:{
                    width:width_temp
                }
            }]
        });
    }
    function width_reply(){
        document.getElementById("width_input").value = 1;
        document.getElementById("width_range").value = 1;
        myChart.setOption({
            series:[{
                lineStyle:{
                    width:1
                }
            }]
        });
    }
    function width_reply_color_change(state){
        w_reply = document.getElementById("width_reply");
        if(state==0){
            w_reply.setAttribute("src","/static/img/icon/撤销.svg");
        }
        else{
            w_reply.setAttribute("src","/static/img/icon/撤销(1).svg");
        }
    }
    // 线换色
    function line_color_change(state){
        myChart.setOption({
            series:[{
                lineStyle:{
                    color:color_list[state]
                }
            }]
        });
    }
    // 选中区间操作
    function integral_reply_color_change(state){
        i_reply = document.getElementById("integralreply");
        if(state==0){
            i_reply.setAttribute("src","/static/img/icon/撤销.svg");
        }
        else{
            i_reply.setAttribute("src","/static/img/icon/撤销(1).svg");
        }
    }
    function integral_reply(){
        integral_line = [];
        peakLine = [];
        markLine_integral = markLine.concat(integral_line);
        markLine_integral_peakLine = markLine_integral.concat(peakLine);
        myChart.setOption({
            series:[
                {
                    markLine: {
                    data:markLine_integral_peakLine,
                    animation:false
                    }
                }
            ]
        });
        myChart.setOption({
            visualMap: {
                pieces: [
                {
                    gt: 0,
                    lt: 1,
                    color: '#FFFFFFFF'
                }
                ]
            },
        })
    }
    var peak_show_flag = 0;
    var peakLine_temp = [];
    function p_show(){
        peak_show = document.getElementById("peak_show");
        if(peak_show_flag==0){
            peak_show_flag=1;
            peakLine_temp = peakLine;
            peakLine = [];
            peak_show.setAttribute("src","/static/img/icon/不可见(1).svg");
            markLine_integral = markLine.concat(integral_line);
            markLine_integral_peakLine = markLine_integral.concat(peakLine);
            myChart.setOption({
                series:[
                    {
                        markLine: {
                        data:markLine_integral_peakLine,
                        animation:false
                        }
                    }
                ]
            });
        }
        else{
            peak_show_flag=0;
            peak_show.setAttribute("src","/static/img/icon/可见(1).svg");
            markLine_integral = markLine.concat(integral_line);
            peakLine = peakLine_temp;
            markLine_integral_peakLine = markLine_integral.concat(peakLine);
            myChart.setOption({
                series:[
                    {
                        markLine: {
                        data:markLine_integral_peakLine,
                        animation:false
                        }
                    }
                ]
            });
        }
    }
    function integral_change(){
        i_min = Number(document.getElementById("integral_min").value);
        i_max = Number(document.getElementById("integral_max").value);
        if(i_max<=i_min){
            msg_show("区间选取错误！");
            return;
        }
        else{
            integral_reply();
            integral_line.push({xAxis: i_min,symbol:"none",lineStyle: 
                            {
                                color:"black",
                            },
                        });
            integral_line.push({xAxis: i_max,symbol:"none",lineStyle: 
                {
                    color:"black",
                },
            });
            markLine_integral = markLine.concat(integral_line);
            markLine_integral_peakLine = markLine_integral.concat(peakLine);
            myChart.setOption({
                series:[
                    {
                        markLine: {
                        data:markLine_integral_peakLine,
                        animation:false
                        }
                    }
                ]
            });
            myChart.setOption({
                visualMap: {
                    pieces: [
                    {
                        gt: i_min,
                        lt: i_max,
                        color: integral_color
                    }
                    ]
                },
            });
            counts();
        }
    }
    function integral_color_change(state){
        integral_color=color_list[state];
        if(i_min==i_max){
            return;
        }
        myChart.setOption({
            visualMap: {
                pieces: [
                {
                    gt: i_min,
                    lt: i_max,
                    color: integral_color
                }
                ]
            },
        })
    }
    function clear_integral(){
        integral_line = [];
        peakLine = [];
        markLine_integral = markLine.concat(integral_line);
        markLine_integral_peakLine = markLine_integral.concat(peakLine);
        myChart.setOption({
            series:[
                {
                    markLine: {
                    data:markLine_integral_peakLine,
                    animation:false
                    }
                }
            ]
        });
        integral = document.getElementById("integral");
        integral.setAttribute("style","display:none;width: 10px;height:10px");
        integral_state = 0;
    }
    function integral_show(){
        integral = document.getElementById("integral");
        integral.setAttribute("style","width: 350px;height:300px");
        integral_state = 1;
    }
    var integral_choose_flag = 0;
    function i_choose(){
        integral_choose = document.getElementById("integral_choose");
        if(integral_choose_flag==0){
            integral_choose_flag=1;
            i_min = Number(document.getElementById("integral_min").value);
            i_max = Number(document.getElementById("integral_max").value);
            integral_choose.setAttribute("src","/static/img/icon/区间(1).svg");
            myChart.setOption({
                xAxis:{
                    min:i_min,
                    max:i_max
                }
            });
        }
        else{
            integral_choose_flag=0;
            integral_choose.setAttribute("src","/static/img/icon/区间.svg");
            myChart.setOption({
                xAxis:{
                    min:null,
                    max:null
                }
            });
        }
    }
    function counts(){
        i_min = Number(document.getElementById("integral_min").value);
        i_max = Number(document.getElementById("integral_max").value);
        i_out = document.getElementById("counts");
        i_peak = document.getElementById("peak");
        var all_count = 0;
        var temp = 0;
        var temp_i = 0;
        for(var i=i_min;i<i_max;i++){
            if(data[i][1]>temp){
                temp = data[i][1];
                temp_i = i;
            }
            all_count += data[i][1];
        }
        i_out.value = all_count;
        peakLine.push(
            {xAxis: temp_i,symbol:"circle",lineStyle: 
                {
                    color:"red",
                },
                label: {color:color_list[0],formatter:'峰值:'+temp,fontSize:10}
            }
        );
        markLine_integral = markLine.concat(integral_line);
        markLine_integral_peakLine = markLine_integral.concat(peakLine);
            myChart.setOption({
                series:[
                    {
                        markLine: {
                        data:markLine_integral_peakLine,
                        animation:false
                        }
                    }
                ]
            });
        i_peak.value = "("+temp_i+","+temp+")";
    }
    // 标线操作
    function reflash_mark(state){
        if(state==1){
            stop_reflash_mark=0;
        }
        else{
            stop_reflash_mark=1;
        }
    }
    function mark_change(state){
        var mark_temp = document.getElementById("mark"+state).value;
        if(markLine_x[Number(state)-1]!=null){
            markLine_x[Number(state)-1]=mark_temp;
            markLine[Number(state)-1].xAxis=mark_temp;
            markLine[Number(state)-1].label.formatter = '标线'+Number(state)+':'+markLine_x[Number(state)-1];
            document.getElementById("marky"+state).value=data[mark_temp][1];
            markLine_integral = markLine.concat(integral_line);
            markLine_integral_peakLine = markLine_integral.concat(peakLine);
            myChart.setOption({
                series:[
                    {
                        markLine: {
                        data:markLine_integral_peakLine,
                        animation:false
                        }
                    }
                ]
            });
        }
        else{
            markLine_num+=1;
            markLine_x.push(mark_temp);
            document.getElementById("marky"+state).value=data[mark_temp][1];
            markLine.push({xAxis: mark_temp,symbol:"triangle",
                lineStyle: 
                {
                    color:color_list[markLine_num-1],
                    type: 'solid'
                },
            label: {color:color_list[markLine_num-1],formatter:'标线'+markLine_num+':'+markLine_x[Number(markLine_num)-1],fontSize:10}});
            markLine_integral = markLine.concat(integral_line);
            markLine_integral_peakLine = markLine_integral.concat(peakLine);
            myChart.setOption({
                series:[
                    {
                        markLine: {
                        data:markLine_integral_peakLine,
                        animation:false
                        }
                    }
                ]
            });
        }
    }
    function mark_reply_color_change(state){
        num_temp =  parseInt(Number(state)/2+1);
        s = Number(state)%2;
        if(s==1){
            document.getElementById("markreply"+num_temp).setAttribute("src","/static/img/icon/撤销(1).svg");
        }
        else{
            document.getElementById("markreply"+num_temp).setAttribute("src","/static/img/icon/撤销.svg");
        }
    }   
    function mark_reply(state){
        var mark_temp = document.getElementById("mark"+state).value;
        if(markLine_x[Number(state)-1]!=null){
            console.log(markLine_num)
            markLine_x.splice(Number(state)-1,1);
            markLine = [];
            markLine_num-=1;
            for(var i=0;i<markLine_num;i++){
                markLine.push({xAxis: markLine_x[i],symbol:"triangle",
                    lineStyle: 
                    {
                        color: color_list[i],
                        type: 'solid'
                    },
                label: {color:color_list[i],formatter:'标线'+(i+1)+':'+markLine_x[i],fontSize:10}}
                );
            }
            markLine_integral = markLine.concat(integral_line);
            markLine_integral_peakLine = markLine_integral.concat(peakLine);
            myChart.setOption({
                series:[
                    {
                        markLine: {
                        data:markLine_integral_peakLine,
                        animation:false
                        }
                    }
                ]
            });
        }
        else{
        }
    }
    function clear_marks(){
        markLine_num=0;
        markLine_x=[];
        markLine=[];
        markLine_integral = markLine.concat(integral_line);
        markLine_integral_peakLine = markLine_integral.concat(peakLine);
        myChart.setOption({
            series:[
                {
                    markLine: {
                    data:markLine_integral_peakLine,
                    animation:false
                    }
                }
            ]
        });
        marks = document.getElementById("mark");
        marks.setAttribute("style","display:none;width: 10px;height:10px");
        marks_state = 0;
    }
    function marks_show(){
        marks = document.getElementById("mark");
        marks.setAttribute("style","width: 350px;height:550px");
        marks_state = 1;
    }
    function msg_show(text){
        msg.innerHTML = text;
        msg_title.innerHTML = text;
        $('.toast').toast('show');
    }
    function always_show(CheckBox){
        mark_close = document.getElementById("mark_close");
        integral_close = document.getElementById("integral_close");
        if(CheckBox.checked==true){
            mark_close.setAttribute("style","display:none");
            integral_close.setAttribute("style","display:none");
        }
        else{
            mark_close.setAttribute("style","");
            integral_close.setAttribute("style","");
        }
    }
    //文件操作
    var filename = null
    var formFile = new FormData();
    function file_change(){
        var selectedFile = document.getElementById("file_input").files[0];//获取读取的File对象
        filename = selectedFile.name;//读取选中文件的文件名
        var size = selectedFile.size;//读取选中文件的大小
        document.getElementById("file_input_inner").innerHTML = "文件名:"+filename+"大小:"+size
        formFile.append("filename", filename);
        formFile.append("file", selectedFile); //加入文件对象
    }
    function file_submit(){
        if(filename==null){
            msg_show("未选择文件");
            return
        }
        let data = formFile
        task_sub = $.ajax({
            url: "/submit_task",
            data: data,
            type: "POST",
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (data) {
                json_data = JSON.parse(data);
                data_temp = json_data["value"];
                msg_show(json_data["msg"]);
            },
        });
        task_sub.done(function(){
            data = data_temp;
            data_flag = 1;
            myChart.setOption(option);
            myChart.setOption({
                tooltip:{
                    formatter:function(params){
                        Xindex = params[0].dataIndex;
                        let str = "";
                        params.forEach((item) => {
                            str += item.seriesName+ "<br />"+
                                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#6a7985AD'+'"></span>' + "("+data[Xindex][0] + " , " + data[Xindex][1] +")" + "<br />";
                        });
                        return str;         
                    }
                },
                xAxis:{
                    max:data.length+data[0][0]+20,
                    min:data[0][0],
                },
                series:{
                    data:data
                }
            });
        });
    }
    function file_reply_color_change(state){
        f_reply = document.getElementById("file_reply");
        if(state==0){
            f_reply.setAttribute("src","/static/img/icon/撤销.svg");
        }
        else{
            f_reply.setAttribute("src","/static/img/icon/撤销(1).svg");
        }
    }
    function file_reply(){
        document.getElementById("file_input_inner").innerHTML = "Choose File";
        get_my_data();
    }

    var data_task;
    var data_time_progress=0;
    var progress = document.getElementById("data_progress");
    //数据读取操作
    function data_start(){
        var data_start_show = document.getElementById("data_start_show");
        var data_time_now_show = document.getElementById("data_time_now_show");
        var data_time_show = document.getElementById("data_time_show");
        var data_count_show = document.getElementById("data_count_show");
        var time_max = document.getElementById("time_max");
        var count_max = document.getElementById("count_max");
        if(time_max.value==null){
            time_max.value="0";
        }
        if(count_max.value==null){
            count_max.value="0";
        }
        if(Number(count_max.value)>=0 || Number(time_max.value)>=0){
            data_start_show.innerHTML = "进行中";
            data_time_show.innerHTML = time_max.value;
            data_count_show.innerHTML = count_max.value;
            count_data = {
                time:time_max.value,
                count:count_max.value
            }
            start_flag=1;
            $('#exampleModal').modal('hide')
            myChart.setOption({
                toolbox:{
                    feature:{
                        myTool_start:{
                            icon:'image://../static/img/icon/暂停.svg'
                        }
                    }
                }
            });
            $.ajax({
                url: "/data_start",
                data: count_data,
                type: "POST",
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                success: function (data) {
                    json_data = JSON.parse(data);
                    msg_show(json_data["msg"]);
                    },
                });
            data_task = setInterval(function(){
                $.ajax({
                url: "/data_read",
                data: data,
                type: "POST",
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                success: function (data) {
                    json_data = JSON.parse(data);
                    data_time_progress+=0.1;
                    if(data_time_progress>=(Number(time_max.value))){
                        myChart.setOption({
                            toolbox:{
                                feature:{
                                    myTool_start:{
                                        icon:'image://../static/img/icon/播放.svg'
                                    }
                                }
                            }
                        });
                        start_flag=0;
                        msg_show("计数截至");
                        data_start_show.innerHTML = "完成";
                        data_time_progress=0;
                        clearInterval(data_task);
                        return;
                    }
                    par_time_progress = data_time_progress/Number(time_max.value);
                    data_time_now_show.innerHTML = data_time_progress.toFixed(1);
                    progress.innerHTML = "time:"+data_time_progress.toFixed(1)+"s"
                    progress.setAttribute("style","width:"+par_time_progress*100+"%");
                    },
                });
            }, 100);
        }
        else{
            msg_show("请设置正确的计数条件！");
            return;
        }
    }
    function data_pause(){
        var data_time_show = document.getElementById("data_time_show");
        data_start_show.innerHTML = "暂停";
        clearInterval(data_task);
        $.ajax({
            url: "/data_pause",
            data: data,
            type: "POST",
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (data) {
                json_data = JSON.parse(data);
                msg_show(json_data["msg"]);
                },
        });
    }
    function data_stop(){
        var data_start_show = document.getElementById("data_start_show");
        var data_time_now_show = document.getElementById("data_time_now_show");
        var data_time_show = document.getElementById("data_time_show");
        var data_count_show = document.getElementById("data_count_show");
        data_time_now_show.innerHTML = 0;
        data_start_show.innerHTML = "关闭";
        data_time_progress=0;
        progress.innerHTML = "time:"+data_time_progress+"s"
        progress.setAttribute("style","width:"+data_time_progress+"%");
        $.ajax({
            url: "/data_stop",
            data: data,
            type: "POST",
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (data) {
                json_data = JSON.parse(data);
                msg_show(json_data["msg"]);
                },
        });
        clearInterval(data_task);
    }
    function enter_set(){
        var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异  
        if (event.keyCode == 13){  
            data_start();  
        }
    }
</script>